<template>
    <div class="app-container">
      <el-card>
        <el-form ref="form" :model="form" label-width="100px" :rules="rules">
          <el-form-item label="请选择产品:" prop="productList">
            <div style="">
              <div class="product-img">
                <div
                  class="product-img-box"
                  v-for="(item, idx) in form.productList"
                  :key="item.id"
                >
                  <el-tooltip effect="dark" :content="item.name" placement="top">
                    <img style="" :src="item.pic" alt="" />
                  </el-tooltip>
  
                  <i
                    @click="delProduct(idx, item.id)"
                    style="color: #ccc; font-weight: bold"
                    class="el-icon-close i2"
                  ></i>
                </div>
  
                <div
                  style="line-height: 96px; margin-right: 10px"
                  v-if="form.productList.length < 1"
                >
                  <div class="uploadPic" @click="selectPic()">
                    <i
                      style="font-size: 40px; color: #ccc; font-weight: bold"
                      class="el-icon-plus i1"
                    ></i>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="请选择问题:" prop="questionId">
            <treeselect
              style="width: 500px"
              v-model="form.questionId"
              :options="treelist"
              :normalizer="normalizer"
              placeholder="请选择问题"
              :default-expand-level="2"
            />
          </el-form-item>
          <el-form-item label="答案类型:" prop="type">
            <el-radio-group v-model="form.type" @change="typeChange">
              <el-radio label="1">文本</el-radio>
              <el-radio label="2">图片</el-radio>
              <el-radio label="3">视频</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="答案:" prop="content" v-if="form.type == '1'">
            <el-input
              style="width: 500px"
              v-model="form.content"
              type="textarea"
              maxlength="200"
              show-word-limit
              :rows="4"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="答案图片:" prop="linkUrl" v-if="form.type == '2'">
            <single-upload
              uploadType="2"
              @uploadSucces="uploadSucces"
              v-model="form.linkUrl"
            >
              <div class="uploadPic" v-if="!form.linkUrl">
                <i
                  style="font-size: 40px; color: #ccc; font-weight: bold"
                  class="el-icon-plus"
                ></i>
              </div>
            </single-upload>
          </el-form-item>
          <el-form-item label="答案视频:" prop="linkUrl" v-if="form.type == '3'">
            <div style="display: flex">
              <uploadVideo
                cateId="1000635065"
                :objData="{
                  title: '1234',
                }"
                v-model="form.linkUrl"
                @editVideoId="editVideoId"
              ></uploadVideo>
              <div
                style="
                  margin-left: 20px;
                  color: #aaa;
                  line-height: 30px;
                  margin-top: 20px;
                  font-size: 14px;
                "
              >
                <div>温馨提示</div>
                <div>1、支持MP4格式的视频文件</div>
                <div>2，大小限制在1024MB以下</div>
              </div>
            </div>
          </el-form-item>
  
          <el-form-item>
            <div>
              <el-button @click="cancle" style="width: 100px">取消</el-button>
              <el-button
                style="width: 100px"
                type="primary"
                @click="submitForm('form')"
                >保存</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
  const form = {
    questionId: null,
    type: "1", //  1->文本；2->图片；3->视频',
    videoId: "",
    linkUrl: "",
    content: "",
    productList: [],
  };
  import {
    getMachineNoPage,
    addAnswerItem,
    getAnswerById,
    updateAnswerApi
  } from "@/api/IntelligentService";
  import { handleTree } from "@/utils/auth";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import SingleUpload from "@/components/Upload/uploadOne";
  import uploadVideo from "@/components/uploadVideo/uploadVideo";
  export default {
    components: { Treeselect, SingleUpload, uploadVideo },
    data() {
      return {
        form: Object.assign({}, form),
        rules: {
          productList: [
            { required: true, message: "请选择产品", trigger: "blur" },
          ],
          questionId: [
            { required: true, message: "请选择问题", trigger: "blur" },
          ],
          type: [{ required: true, message: "请选择答案类型", trigger: "blur" }],
          content: [{ required: true, message: "请输入答案", trigger: "blur" }],
          linkUrl: [{ required: true, message: "请上传答案", trigger: "blur" }],
        },
        treelist: [],
      };
    },
  
    async created() {
      if (this.$route.query.id) {
        this.$route.meta.title = "编辑问题";
        this.getInfo(this.$route.query.id);
      }
      this.getTreeList();
    },
    methods: {
      getInfo(id) {
        getAnswerById(id).then((res) => {
          this.$set(this.form, "id", res.data.id);
        //   this.form.type = res.data.type + "";
        //   this.form.content = res.data.content;
        //   this.form.videoId = res.data.videoId;
        //   this.form.linkUrl = res.data.linkUrl;
        //   this.form.questionId = res.data.questionId;
          this.form.productList = [
            {
              id: res.data.productId,
              pic: res.data.pic,
              name: res.data.productName,
            },
          ];
        });
      },
      async getTreeList() {
        const res = await getMachineNoPage();
        let treeData = handleTree(res.data);
        this.treelist = treeData;
  
        this.visible = true;
      },
      typeChange(e) {
        console.log("e", e);
        if (e == 1) {
          this.$refs.form.validateField("linkUrl");
          this.form.linkUrl = "";
        } else {
          this.$refs.form.validateField("content");
          this.form.content = "";
        }
      },
      cancle() {
        this.$router.back()
      },
      submitForm(form) {
        this.$refs[form].validate(async (valid) => {
          if (valid) {
            let params = {
              productId: this.form.productList[0].id,
              questionId: this.form.questionId,
              type: this.form.type,
              content: this.form.content,
              videoId: this.form.videoId,
              linkUrl: this.form.linkUrl,
              id: this.form.id,
            };
            if (this.form.id) {
                addAnswerItem(params).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功!",
                  });
                  setTimeout(()=> {
                    this.$router.back();
                  },1500)
                }
              });
            }
          }
        });
      },
      editVideoId(v) {
        this.form.videoId = v;
        setTimeout(() => {
          this.$refs.form.validateField("linkUrl");
        }, 100);
      },
      uploadSucces() {
        this.$refs.form.validateField("linkUrl");
      },
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children,
        };
      },
  
      delProduct(idx) {
        this.form.productList.splice(idx, 1);
        this.$refs.form.validateField("productList");
      },
  
      selectPic() {
        let that = this;
        that.$modalGoodList(
          function (row) {
            if (row) {
              let app = row.map((v) => {
                return {
                  id: v.id,
                  name: v.name,
                  pic: v.pic,
                };
              });
              that.$set(that.form, "productList", app);
              that.$refs.form.validateField("productList");
            }
          },
          "1",
          that.form.productList.map((v) => {
            return v.id;
          })
        );
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .product-img {
    width: 1000px;
    display: flex;
    flex-wrap: wrap;
    .product-img-box {
      position: relative;
      .i2 {
        position: absolute;
        right: -1px;
        top: -5px;
      }
    }
    .uploadPic {
      width: 96px;
      height: 96px;
      // margin-left: 10px;
      background: #eeeeee;
      border-radius: 8px;
      position: relative;
  
      .i1 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  
    img {
      width: 96px;
      height: 96px;
      margin-right: 13px;
    }
  }
  
  .uploadPic {
    width: 90px;
    height: 90px;
  
    background: #eeeeee;
    border-radius: 8px;
    position: relative;
    > i {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  </style>
  